<template>
    <div class="user-views">
        <el-card class="user-views-card" shadow="hover">
            <template #header>
                <div class="card-header">
                    <span>我的收藏</span>
                </div>
            </template>
            <div v-loading="state.pageLoading" class="list-box">
                <div class="content-item" v-for="(item, idx) in state.list" :key="idx">
                    <CmsLeftImageCard
                        :article="{
                            ...item,
                            cmsChannel: {
                                id: item.channel_id,
                                name: item.name,
                            },
                            create_time: item.publish_time,
                        }"
                    />
                </div>
            </div>
            <div v-if="state.total > 0" class="log-footer">
                <el-pagination
                    :currentPage="state.currentPage"
                    :page-size="state.pageSize"
                    :page-sizes="[10, 20, 50, 100]"
                    background
                    :layout="memberCenter.state.shrink ? 'prev, next, jumper' : 'sizes, ->, prev, pager, next, jumper'"
                    :total="state.total"
                    @size-change="onTableSizeChange"
                    @current-change="onTableCurrentChange"
                ></el-pagination>
            </div>
            <el-empty v-else />
        </el-card>
    </div>
</template>

<script setup lang="ts">
import { collect } from '~/api/cms/user'

definePageMeta({
    name: 'cms/collect',
})

const memberCenter = useMemberCenter()
const state: {
    list: {
        id: string
        title: string
        images: string
        publish_time: string
        name: string
        channel_id: number
    }[]
    currentPage: number
    total: number
    pageSize: number
    pageLoading: boolean
} = reactive({
    list: [],
    currentPage: 1,
    total: 0,
    pageSize: 10,
    pageLoading: true,
})

const loadData = async () => {
    state.pageLoading = true
    const { data } = await collect({
        page: state.currentPage,
        limit: state.pageSize,
    })
    if (data.value?.code == 1) {
        state.pageLoading = false
        state.list = data.value?.data.list
        state.total = data.value?.data.total
    }
}

const onTableSizeChange = (val: number) => {
    state.pageSize = val
    loadData()
}
const onTableCurrentChange = (val: number) => {
    state.currentPage = val
    loadData()
}

loadData()
</script>

<style scoped lang="scss">
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.user-views-card :deep(.el-card__body) {
    padding-top: 0;
    .content-item {
        border-bottom: 1px solid var(--el-border-color-extra-light);
    }
    .content-item:last-child {
        border: none;
    }
}
</style>
